<template>
	<div v-if="loading" class="loading">loading</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
	color?: string
}

withDefaults(defineProps<Props>(), {
	color: '#000',
})

const loading = ref(false)

function show() {
	loading.value = true
}
function hide() {
	loading.value = false
}

defineExpose({ show, hide })
</script>

<style lang="scss" scoped>
.loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 30px;
	font-weight: 800;
	background-color: rgba($color: #000000, $alpha: 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: v-bind(color);
}
</style>
